<template>
  <div class="pres-out-list">
    <div class="pres-out-list-header">
      <el-form :model="searchForm" ref="form" label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="5" :offset="0">
            <el-form-item label="病案号">
              <el-input v-model="searchForm.patient_id" placeholder="请输入病案号" />
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-form-item label="病人身份证号">
              <el-input v-model="searchForm.card_nbr" placeholder="请输入病人身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-form-item label="处方编号">
              <el-input v-model="searchForm.pres_id" placeholder="请输入处方编号" />
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="0">
              <el-form-item label="处方日期范围">
                <el-date-picker v-model="searchForm.pres_date" type="daterange" align="right"  value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width: 100%" />
              </el-form-item>
          </el-col>
          <el-col :span="2" :offset="0">
            <el-button type="primary" size="small" @click="handleQuery()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="pres-out-list-body">
      <div class="pres-out-list-body-left" style="border: 1px solid #ccc;">
        <el-table ref="table" :data="presOutList" border stripe empty-text="暂无数据" @current-change="handleCurrentChange" :height="tableHeight" >
          <el-table-column v-for="col in columns"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width">
          </el-table-column>
        </el-table>
      </div>
      <div class="pres-out-list-body-right">
        <prescription ref="pres" class="prescription" :data="prescriptionData" :view="true" />
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getPresOutList, getPresDetail } from '@/api/pres'
  import prescription from '../components/prescription'

  export default {
    components: { prescription },
    name: 'PresOutList',
    data() {
      return {
        prescriptionData: { 
          print: false,
          pres_id : '',
          patient_id: 0,
          patient_name : '',
          patient_sex : '',
          patient_age: 99,
          patient_id_card : '',
          patient_addr : '',
          patient_contact_tel : '',
          sect_id: 0,
          sect_name : '0',
          doct_id: 0,
          doctor_name : '',
          amount: 0,
          diag_id: 85117,
          pres_date : '2025-01-01 00:00:00',
          icds: [],
          // icdnames : '',
          // valid_days: 3,
          // hi_rxno : '',
          // rx_trace_code : '',
          // rx_stas_codg : '0',
          list: [ ]
         },
        searchForm: {
          pres_id: '',
          pres_date: [this.getDate(new Date()), this.getDate(new Date())],
          patient_id: '',
          doct_id: 0
        },
        columns: [
          { id: 'pres_id', label: '处方编号', width: '120px' },
          { id: 'pres_date', label: '处方时间', width: '160px' },
          { id: 'patient_id', label: '病案号', width: '100px' },
          { id: 'patient_name', label: '姓名', width: '100px' },
          { id: 'doct_name', label: '医生姓名', width: '100px' },
          { id: 'sect_name', label: '科室名称', width: '100px' },
          { id: 'amount', label: '处方金额', width: '100px' },
        ],
        presOutList: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        tableHeight: 400
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    mounted() {
      this.searchForm.doct_id = this.getDoctId()
      // 设置表格高度（自适应）
      this.calcTableHeight()
      window.addEventListener('resize', () => {
        this.calcTableHeight()
      })
      // 触发一次resize事件
      const myEvent = new Event('resize')
      window.dispatchEvent(myEvent)

    },
    methods: {
      getDate(date) {
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      },
      getDoctId(){
        return this.userInfo.staff_id
      },
      handleQuery() {
        getPresOutList(this.searchForm).then(res => {
          this.presOutList = res.data.dataList
        })
      },
      handleCurrentChange(row, index) {
        const pres_id = row.pres_id
        getPresDetail({pres_id: pres_id}).then(res => {
          console.log(res.data)
          this.prescriptionData = res.data
          // this.$refs.pres.initDiagnose(this.prescriptionData.icds)
        })
      },
      calcTableHeight() {
        this.$nextTick(() => {
          if (this.$refs.table) {
            // this.tableHeight = this.$refs.table.parentElement.getBoundingClientRect().height - this.$refs.table.getBoundingClientRect().y + this.$refs.table.parentElement.getBoundingClientRect().y
            this.tableHeight = this.$refs.table.$el.parentElement.offsetHeight
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.pres-out-list {
  height: calc(100vh - 6rem);
  &-header {
    padding: 10px 10px 0 10px;
  }
  &-body {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    height: 100%;
    &-left {
      height: calc(100% - 3rem);
      width: 40%;
    }
    &-right {
      width: 60%;
      height: calc(100% - 3rem);
      margin: 0 10px 0 20px;
      border: 1px solid #ccc;
      padding: 1rem;
      .prescription {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>